<template>
  <div class="main">
    <div class="top">
      <div>徐州市物资管理中心物资上报辅助审核平台</div>
    </div>
    <div class="middle">
      <div style="width: 28%">
        <el-form hide-required-asterisk ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="40px"
          size="large">
          <el-form-item class="form" label="账号" prop="userName">
            <el-input v-model="ruleForm.userName" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item class="form" label="密码" prop="password" style="margin: 32px 0px">
            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password />
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" style="width: 100%" @click="submit(ruleFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottom">
      <div style="margin-right: 40px">
        江苏莘纳吉科技有限公司技术支持@徐州供电公司物资管理中心版权所有
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import router from '@/router/index.js'
import { login } from '@/utils/api.js'
import { ElMessage } from 'element-plus'
const ruleForm = reactive({
  userName: '',
  password: ''
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
  userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      login(ruleForm).then((res: any) => {
        if (res.msg == 'ok') {
          ElMessage.success('登录成功')
          localStorage.setItem('loginInfo', JSON.stringify({ ...res.data, userName: ruleForm.userName }))
          router.push(`/main/home`);
        } else {
          ElMessage.error(res.msg)
        }
      })

    } else {
    }
  })
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;

  .top {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #197b8b;
    color: #c9ebf0;
    font-size: 26px;
    font-weight: bold;
  }

  .middle {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2d96a7;
  }

  .bottom {
    height: 10%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #1f8796;
    color: white;
    font-size: 14px;
  }
}

::v-deep .form .el-form-item__label {
  color: white;
}
</style>